<template>
  <div>
    <AdminHome v-if="isAdmin" />
    <UserHome v-else />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import UserHome from './UserHome.vue'
import AdminHome from './AdminHome.vue'

export default {
  name: 'Index',
  components: { UserHome, AdminHome },
  computed: {
    ...mapState({ roles: state => state.user.roles }),
    isAdmin() {
      // 角色名包含 'admin' 或 '管理员' 均视为管理员
      return this.roles && this.roles.some(r => r === 'admin' || r === '管理员')
    }
  }
}
</script>

<style scoped>
.user-home {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 16px;
}
.welcome-card {
  background: #f0f9ff;
  border-radius: 12px;
  padding: 24px 32px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(33,147,176,0.06);
}
.stats-row {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}
.stat-card {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(33,147,176,0.08);
  padding: 20px 0;
  text-align: center;
}
.stat-num {
  font-size: 2.2rem;
  color: #2193b0;
  font-weight: bold;
}
.stat-label {
  color: #888;
  margin-top: 8px;
}
.quick-row {
  margin-bottom: 24px;
  display: flex;
  gap: 16px;
}
.main-row {
  display: flex;
  gap: 24px;
}
.main-card {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(33,147,176,0.08);
  padding: 20px 24px 24px 24px;
}
.notice-list {
  padding-left: 18px;
  color: #666;
  font-size: 15px;
}
</style>

